<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :span="12" :offset="6">
                <div style="text-align: center;margin-bottom: 30px">
                    建筑{{ createStatus ? '新增' : '更新' }}
                </div>
                <el-form :model="buildingForm" :rules="enterpriseFormRules" ref="buildingForm" label-width="100px">
                    <el-row :gutter="10">
                        <el-form-item label="建筑名称" prop="name">
                            <el-input type="text" v-model="buildingForm.name" placeholder="请输入建筑名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="所属主体" prop="enterpriseId" v-if="enterPriseHidden">
                            <el-select v-model="buildingForm.enterpriseId" filterable placeholder="请选择主体" style="width: 100%">
                                <el-option v-for="(item,index) in enterpriseDominantList" :key="index"  :value="item.ucId" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="loaction">
                            <el-input v-model="buildingForm.loaction" placeholder="请输入详细地址" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="地上层数" prop="overFloorNum">
                            <el-input v-model="buildingForm.overFloorNum" placeholder="请输入地上层数" clearable>
                                <template slot="append">层</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="地下层数" prop="underFloorNum">
                            <el-input v-model="buildingForm.underFloorNum" placeholder="请输入地下层数" clearable>
                                <template slot="append">层</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="占地面积" prop="occupyArea">
                            <el-input v-model="buildingForm.occupyArea" placeholder="请输入占地面积" clearable>
                                <template slot="append">平方米</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="建筑类型" prop="buildingType">
                            <el-select v-model="buildingForm.buildingType" placeholder="请选择建筑类型"
                                       style="width: 100%">
                                <el-option value="11001" label=" 民用建筑"></el-option>
                                <el-option value="11002" label=" 工业建筑"></el-option>
                                <el-option value="11003" label=" 仓库"></el-option>
                                <el-option value="11004" label=" 储罐"></el-option>
                                <el-option value="11005" label=" 堆场"></el-option>
                                <el-option value="11006" label=" 装置"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="消防车数量" prop="fireEngineNum">
                            <el-input type="number" v-model="buildingForm.fireEngineNum" clearable placeholder="请输入可容纳消防车数量" >
                                <template slot="append">辆</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="周边建筑" prop="unitAbutSituation">
                          <el-select v-model="buildingForm.unitAbutSituation" filterable multiple placeholder="请选择周边建筑" style="width: 100%">
                            <el-option v-for="(item,index) in buildingList" :key="index" :value="item.ucId" :label="item.name">
                            </el-option>
                          </el-select>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <div slot="footer" style="text-align: center" class="dialog-footer">
            <el-button @click="cancelBuilding">取 消</el-button>
            <el-button :loading="addLoading" v-if="createStatus" type="primary" @click="createBuilding">创 建
            </el-button>
            <el-button :loading="addLoading" v-else type="primary" @click="updateBuilding">修 改</el-button>
        </div>
    </div>
</template>

<script>
import {getInBuildingVo,addInBuilding,updateInBuilding} from "@/api/building";
import {getInEnterpriseDominantList} from "@/api/enterpriseDominant";
import {getBuildingList} from "@/api/building";
import {isNumber} from "@/utils/validate";

export default {
    name: "budingEdit",
    data() {
        return {
            buildingForm: {
                unitAbutSituation:[]
            },
            addLoading: false,
            enterpriseDominantList:[],
            enterpriseFormRules: {
              enterpriseId: [{required: true, message: '所属主体不能为空', trigger: 'change'}],
              buildingType: [{required: true, message: '建筑类型不能为空', trigger: 'change'}],
              overFloorNum: [
                  {required: true, message: '地上层数不能为空', trigger: 'change'},
                  {validator: isNumber, trigger: "blur"}
              ],
              fireEngineNum: [
                  {required: true, message: '消防车数量不能为空', trigger: 'change'},
                  {validator: isNumber, trigger: "blur"}
              ],
              loaction: [{required: true, message: '详细地址不能为空', trigger: 'blur'}],
              name: [{required: true, message: '  建筑名称不能为空', trigger: 'blur'}]
          },
            buildingList:[],

        }
    },
    computed: {
        createStatus() {
            return this.$route.query.ucId == undefined
        },
        enterPriseHidden(){
          let roleCode = this.$store.getters.roleCode;
          return roleCode=="XT-SUPER"||roleCode=="XT-ADMIN"||roleCode=="ZD-ADMIN"||roleCode=="DD-ADMIN"||roleCode=="JW-ADMIN"
        }
    },
    created() {
        this.getBuildingList()
        this.getInEnterpriseDominantList()
        if (!this.createStatus) {
            let ucId = this.$route.query.ucId
            this.getInBuildingVo(ucId)
        }
    },
    methods: {
        getInBuildingVo(val) {
            getInBuildingVo({ucId: val}).then(res => {
                this.buildingForm = res.data
                this.buildingForm.buildingLocal = [this.buildingForm.province, this.buildingForm.city, this.buildingForm.county]
                this.buildingForm.unitAbutSituation = JSON.parse(res.data.unitAbutSituation)
            }).catch(error => {

            })
        },
        cancelBuilding() {
          window.history.back()
        },
        createBuilding() {
            this.addLoading = true
            this.$refs['buildingForm'].validate(valid => {
                if (valid) {
                    let obj = Object.assign({},this.buildingForm)
                    obj.unitAbutSituation = JSON.stringify(obj.unitAbutSituation)
                    addInBuilding(obj).then(res => {
                        this.addLoading = false
                        this.$notify.success({
                            title: '成功',
                            message: "添加建筑成功"
                        })
                        this.cancelBuilding()
                    }).catch(res => {
                        this.addLoading = false
                        this.$notify.error({
                            title: '失败',
                            message: res.msg
                        })
                    })
                } else {
                    this.addLoading = false
                    console.log("表单验证不通过")
                }
            })
        },
        updateBuilding() {
            this.addLoading = true
            this.$refs['buildingForm'].validate(valid => {
                if (valid) {
                    let obj = Object.assign({},this.buildingForm)
                    obj.unitAbutSituation = JSON.stringify(obj.unitAbutSituation)
                    console.log(obj)
                    updateInBuilding(obj).then(res => {
                        this.addLoading = false
                        this.$notify.success({
                            title: '成功',
                            message: "更新建筑成功"
                        })
                        this.cancelBuilding()
                    }).catch(res => {
                        this.addLoading = false
                        this.$notify.error({
                            title: '失败',
                            message: res.msg
                        })
                    })
                } else {
                    this.addLoading = false
                    console.log("表单验证不通过")
                }
            })
        },
        getInEnterpriseDominantList(){
            getInEnterpriseDominantList({deleted:false}).then(res=>{
                this.enterpriseDominantList = res.data
            }).catch(error=>{

            })
        },
      getBuildingList(){
        getBuildingList({deleted:false}).then(res=>{
          this.buildingList = res.data
        }).catch(error=>{

        })
      },


    }

}
</script>
